import React, { Component } from 'react'
import { object, func, string } from 'prop-types'

import Button from 'antd/lib/button'
import Modal from 'antd/lib/modal'
import { noop } from '../../libs/utils'

export default class ErrorModal extends Component {
  static propTypes = {
    onClose: func,
    error: string,
  }

  static defaultProps = {
    onClose: noop,
    error: 'string',
  }

  state = {
    show: false,
  }

  componentDidMount() {
    this.animationFrame = requestAnimationFrame(() => {
      this.setState({
        show: true,
      })
    })
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.animationFrame)
  }

  onClose = () => {
    this.setState({
      show: false,
    })

    this.modal.box.addEventListener('transitionend', () => {
      this.props.onClose()
    })
  }

  bindModalRef = ref => {
    this.modal = ref
  }

  render() {
    const { error } = this.props
    const { show } = this.state
    const errMsg = error

    return (
      <Modal
        ref={this.bindModalRef}
        title="Error"
        onClose={this.onClose}
        shown={show}
      >
        <div
          className="modal-body"
          dangerouslySetInnerHTML={{ __html: `${errMsg}` }} // eslint-disable-line
        />
        <div className="modal-footer">
          <Button type="secondary" onClick={this.onClose} noSubmit>
            Close
          </Button>
        </div>
      </Modal>
    )
  }
}
